@import "../../css/common-var";
.layout-module_column-setting {
  width: 100%;
  height: 100%;

  .setting-header {
    color: @grey-white-font-color;
    width: 60px;
    height: 32px;
    line-height: 16px;
    font-size: 15px;
    cursor: pointer;

    .iconfont {
      font-size: 15px;
      margin-right: 1px;
    }
  }

  .settings-wrap {
    display: flex;
    height: 100%;
    overflow: hidden;

    .setting-items {
      overflow: auto;
      //width: 130px;
      width: 17%;
      //min-width: 130px;
      border-right: 1px solid rgba(0, 0, 0, 0.04);
      padding-top: 20px;

      .setting-item {
        margin-bottom: 4px;
        margin-right: 30px;
        cursor: pointer;

        .setting-label {
          font-size: 14px;
          margin: 10px 0;
          padding: 6px 18px 6px 8px;
          border-radius: 5px;
          display: flex;
          align-items: center;
          justify-content: space-between;
          color: var(--title-color);
          font-weight: 500;

          &:hover {
            border-radius: 4px;
            background: var(--on-theme-bg-color);
          }
        }
      }

      .active .setting-label {
        background: var(--on-theme-bg-color);
      }
    }

    .setting-content {
      margin-left: 30px;
      width: calc(~"83% - 30px");

      .index-area {
        margin-bottom: 16px;
        display: flex;
        align-items: center;

        h4 {
          font-size: 20px;
          color: var(--font-color);
          line-height: 32px;
          font-weight: 500;
          flex: auto;
          display: flex;
          align-items: center;
        }

        .action-wrapper {
          display: flex;

          .search-input {
            margin-right: 10px;
          }

          .i-search {
            line-height: 32px;
          }
        }
      }

      .base-info {
        width: 100%;

        .base-info-form {
          margin: 20px 5px;
          width:75%;

          .form-item {
            margin-bottom: 20px;

            .label {
              color: var(--title-color);
              margin: 15px 0;

              .required {
                color: red;
              }

              .label-text {
                margin-left: 3px;
              }
            }

            .form-input {
              margin-left: 10px;
            }
          }

          .name {
            width: 70%;

            .name-input {
              margin-bottom: 5px;
            }

            .empty-input {
              /deep/.ivu-input {
                border-color: red;

                &:hover, &:focus {
                  border-color: red;
                }
              }
            }

            .error-tip {
              color: red;
              margin-left: 10px;
            }
          }

          .desc {
            width: 100%;

            .label {
              width: 100%;
              display: flex;
              justify-content: space-between;

              .label-text {
                margin-left: 8px;
              }
            }
          }

          .permission {

            .private-radio, .public-radio {
              display: flex;
              margin-bottom: 15px;

              input {
                margin-right: 8px;
                cursor: pointer;

                &::before {
                  position: relative;
                  content: "";
                  top: 3px;
                  left: -1px;
                  width: 16px;
                  height: 16px;
                  display: block;
                  border-radius: 50%;
                  background-color: #FFFFFF;
                  border: 1px solid #00b96b;
                  z-index: 5;
                }
              }

              .checked::after {
                position: relative;
                content: "";
                bottom: 9px;
                left: 3px;
                width: 8px;
                height: 8px;
                display: block;
                border-radius: 50%;
                visibility: visible;
                background-color: #00b96b;
                z-index: 6;
              }

              .permission-label {
                margin: 0;
                cursor: pointer;
              }

              .public-radio {
                margin-bottom: 10px;
              }
            }

            /deep/.ivu-poptip-arrow {
              display: none;
            }

            /deep/.ivu-poptip-inner {
              border: 1px solid @border-color_normal;
              background: var(--modal-bg-color);

              .ivu-btn-text {
                background: unset;
              }
            }
          }

          .cover {
            .label {
              .label-text {
                margin-left: 8px;
              }
            }

            .cover-input {
              width: 470px;
              display: flex;
              margin: 10px 0 35px 10px;
              justify-content: space-between;

              .crop-box {
                width: 300px;
                min-width: 300px;
                height: 200px;
                border-radius: 4px;
                overflow: hidden;
              }

              .cover-preview {
                margin-left: 30px;
                height: 200px;
                min-height: 200px;
                width: 180px;
                min-width: 180px;
                display: flex;
                flex-direction: column-reverse;

                .img {
                  width: 180px;
                  min-width: 180px;
                  height: 90px;
                  min-height: 90px;
                  border-radius: 3px;
                  margin-bottom: 10px;
                }

                .cover-upload-select {
                  margin-top: 15px;
                  display: flex;
                  justify-content: space-between;
                  align-items: center;

                  .cover-upload-btn {
                    font-weight: 500;
                    color: var(--title-color);
                    background: var(--on-theme-bg-color);
                    border-color: @border-color_normal;
                    padding: 0 13px;
                  }

                  .clear-cover-btn {
                    cursor: pointer;
                    margin-right: 15px;

                    &:hover {
                      color: #00b96b;
                    }
                  }

                }
              }

              .cover-placeholder {
                &::before {
                  width: 300px;
                  display: flex;
                  justify-content: center;
                  content: '推荐尺寸360px*180px';
                  color: #8a8f8d;
                  position: absolute;
                  z-index: 9;
                  bottom: 30px;
                }

                &::after {
                  content: '';
                  z-index: 8;
                  position: relative;
                  display: flex;
                  width: 300px;
                  height: 240px;
                  background: url("https://lovbe-blog.oss-cn-chengdu.aliyuncs.com/sysconfig/background/column-placeholder-cover.png");
                }
              }
            }
          }

          .action {
            margin-left: 10px;
          }
        }
      }

      .article-list {
        .article-header-wrapper {
          width: 100%;
          line-height: 24px;
          display: flex;
          align-items: center;
          margin: 20px 0;
          padding-bottom: 15px;
          border-bottom: 1px solid @border-004;

          .header-left-checkbox {
            width: 4%;
          }

          .table-header {
            display: flex;
            width: 92%;

            .article-name {
              width: 46%;
            }

            .status {
              width: 8%;
            }

            .create-time, .update-time {
              width: 25%;
              text-align: center;
            }
          }

          .item-checked {
            width: 50%;
            display: flex;
            align-items: center;

            .ivu-btn {
              height: 24px;
            }
          }

          .right-action {
            width: 50%;
            display: flex;
            flex-direction: row-reverse;

            .ivu-btn {
              height: 24px;
            }
          }
        }

        .article-list-wrapper {
          height: 650px;
          overflow-y: auto;
        }

        .note-list-item {
          display: flex;
          width: 100%;
          padding: 10px 0;
          border-radius: 4px;

          &:hover {
            background: var(--on-theme-bg-color);
          }

          .left-checkbox {
            width: 4%;
          }

          .center-table-view {
            width: 92%;
            display: flex;

            .article-name {
              width: 44%;
              padding-right: 8px;
              display: block;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
              cursor: pointer;
            }

            .status {
              width: 10%;
            }

            .create-time, .update-time {
              width: 25%;
              text-align: center;
              color: @grey-white-font-color;
            }
          }

          .right-action {
            width: 4%;
            color: @grey-white-font-color;

            .operate {
              color: @grey-white-font-color;
              font-weight: 600;
            }

          }
        }
      }

      .more-setting {
        margin-top: 25px;

        .more-setting-item {
          .setting-enable-comment, .setting-auto-publish {
            margin-bottom: 24px;

            .checkbox-label {
              color: var(--font-color);
            }

            .setting-tips {
              margin-left: 24px;
            }
          }

          .setting-action-area {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 16px;
            background: var(--on-theme-bg-color);
            border-radius: 8px;
            margin-bottom: 20px;

            .setting-action-title {
              font-size: 14px;
              line-height: 22px;
            }

            .ivu-btn {
              margin-left: 10px;
            }

            .ivu-btn-ghost {
              border-color: @border-color_normal;
              &:hover {
                border-color: @primary-color;
              }
            }
          }

          .setting-tips-content {
            line-height: 22px;
            margin-top: 6px;
            font-size: 14px;
            color: var(--title-color);
          }
        }
      }
    }
  }
}

.article-info-form {
  margin: 15px 10px 20px;
  width:90%;

  .form-item {
    margin-bottom: 20px;

    .label {
      color: var(--font-color);
      margin: 15px 0;

      .required {
        color: red;
      }

      .label-text {
        margin-left: 3px;
      }
    }

    .form-input {
      margin-left: 10px;
    }
  }

  .name {
    width: 70%;

    .name-input {
      margin-bottom: 5px;
    }

    .empty-input {
      /deep/.ivu-input {
        border-color: red;

        &:hover, &:focus {
          border-color: red;
        }
      }
    }

    .error-tip {
      color: red;
      margin-left: 10px;
    }
  }

  .desc {
    width: 100%;

    .label {
      width: 100%;
      display: flex;
      justify-content: space-between;

      .label-text {
        margin-left: 8px;
      }
    }
  }

  .cover {
    .label {
      .label-text {
        margin-left: 8px;
      }
    }

    .cover-input {
      width: 98%;
      display: flex;
      margin: 10px 0 35px 10px;
      justify-content: space-between;

      .crop-box {
        width: 238px;
        min-width: 238px;
        height: 146px;
        border-radius: 4px;
        overflow: hidden;
      }

      .cover-preview {
        height: 146px;
        min-height: 146px;
        width: 153px;
        min-width: 153px;
        display: flex;
        flex-direction: column-reverse;

        .img {
          width: 153px;
          min-width: 153px;
          height: 95px;
          min-height: 95px;
          border-radius: 3px;
        }

        .cover-upload-select {
          margin-top: 15px;
          display: flex;
          justify-content: space-between;
          align-items: center;

          .cover-upload-btn {
            font-weight: 500;
          }

          .clear-cover-btn {
            cursor: pointer;

            &:hover {
              color: #00b96b;
            }
          }

        }
      }

      .cover-placeholder {
        &::before {
          width: 238px;
          display: flex;
          justify-content: center;
          content: '添加封面有助于吸引读者哦';
          font-size: 12px;
          color: #8a8f8d;
          position: absolute;
          z-index: 9;
          bottom: 20px;
        }

        &::after {
          content: '';
          z-index: 8;
          position: relative;
          display: flex;
          width: 238px;
          height: 146px;
          background: url("https://lovbe-blog.oss-cn-chengdu.aliyuncs.com/sysconfig/background/article-placeholder-cover.png");
        }
      }
    }
  }

  .action {
    margin-left: 10px;
  }
}

.delete-warn {

  .warn-content {
    display: flex;
    color: #262626;
    background-color: #F9EFCD;
    border: 1px solid #F5D480;
    border-radius: 6px;
    padding: 15px;

    .warn {
      font-size: 18px;
      color: red;
      margin-right: 5px;
      margin-top: -2px;
    }

    .column-name {
      color: red;
    }
  }

  .warn-confirm {
    margin: 20px 4px;
    height: 80px;

    .confirm-input {
      margin: 10px 0 5px 0;
    }

    .cannot-delete {
      .ivu-input {
        border-color: red;
      }
    }

    .tips {
      color: red;
    }
  }

  .warn-btn {
    margin: 10px 4px;
    width: 98.5%;
    display: flex;
    align-items: center;

    & span {
      width: 100%;
    }

    .column-name {
      display: block;

      //margin: 0 auto;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
  }
}

/deep/ .ivu-dropdown-menu {
  min-width: 120px;
  padding: 5px 0;

  .ivu-dropdown-item {
    padding: 8px 0;
    text-align: left;

    .action-item {
      color: var(--title-color);
      padding-left: 15%;
      width: 100%;
      display: inline-block;

      .article-setting, .remove {
        font-weight: 500;
        font-size: 17px;
      }

      .iconfont {
        margin-right: 6px;
      }
    }
  }
}

/deep/ .modal-setting-item {
  width: 95%;
  padding: 5px 10px 10px 25px;

  .title, .cover, .summary, .tags, .category {
    margin-bottom: 13px;
  }

  .tag-add-control {
    flex-direction: unset;
  }

  .category-group {
    justify-content: space-between;
    .ivu-select {
      color: var(--font-color);

      .ivu-select-selection {
        background: var(--dropdown-bg-color);
        border-color: @border-color_normal;

        .ivu-select-input {
          color: var(--font-color);
        }
      }

      .ivu-select-dropdown {
        background: var(--dropdown-bg-color);

        .ivu-select-item {
          color: var(--title-color);
        }

        .ivu-select-item-selected {
          color: var(--font-color);
        }

        .ivu-select-item:hover, .ivu-select-item-focus {
          background: var(--dropdown-item-hover);
          color: var(--font-color);
        }
      }
    }
  }
}


